<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="6">
				<div class="content">
					<div class="money">
						<span>今日</span>
						<countTo :startVal='startVal' :endVal='todayEndVal' :duration='1000' :decimals="2"></countTo>
					</div>
					<div class="order">
						<span>业绩/订单</span>
						<countTo :startVal='startVal' :endVal='todayEndValOrder' :duration='1000' suffix='单'></countTo>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="content">
					<div class="money">
						<span>本周</span>
						<countTo :startVal='startVal' :endVal='weekEndVal' :duration='1000' :decimals="2"></countTo>
					</div>
					<div class="order">
						<span>业绩/订单</span>
						<countTo :startVal='startVal' :endVal='weekEndValOrder' :duration='1000' suffix='单'></countTo>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="content">
					<div class="money">
						<span>本月</span>
						<countTo :startVal='startVal' :endVal='monthEndVal' :duration='1000' :decimals="2"></countTo>
					</div>
					<div class="order">
						<span>业绩/订单</span>
						<countTo :startVal='startVal' :endVal='monthEndValOrder' :duration='1000' suffix='单'></countTo>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="content">
					<div class="money">
						<span>历史</span>
						<countTo :startVal='startVal' :endVal='historyEndVal' :duration='1000' :decimals="2"></countTo>
					</div>
					<div class="order">
						<span>业绩/订单</span>
						<countTo :startVal='startVal' :endVal='historyEndValOrder' :duration='1000' suffix='单'></countTo>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="20" style="margin-top: 20px">
			<el-col :span="12">
				<div class="gift-info">
					<div class="title">
						<h3>签约礼品</h3>
						<el-radio-group v-model="tabPosition" size="mini" @change="changeButton">
							<el-radio-button label="current">当月</el-radio-button>
							<el-radio-button label="all">全部</el-radio-button>
						</el-radio-group>
					</div>
					<div class="status">
						<p>
							<span>待核销</span>
							<countTo :startVal='startVal' :endVal='waitVerify' :duration='500'></countTo>
						</p>
						<p>
							<span>已领取</span>
							<countTo :startVal='startVal' :endVal='alreadyVerify' :duration='500'></countTo>
						</p>
						<p>
							<span>完成率</span>
							<countTo :startVal='startVal' :endVal='alreadyVerifyRate' :duration='500' :decimals="2" suffix='%'></countTo>
						</p>
					</div>
					<div class="live">
						<p v-for="item in verify_list" :key="item.id" :class="{move: verify_list.length > 3}">中心编号{{item.store_number}}的{{item.baby_name}}宝贝家长领取了{{item.name}}</p>
					</div>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="sale-chart" id="myChart">2</div>
			</el-col>
		</el-row>
		<h3 style="color: #104c80;padding-left: 20px">业绩统计</h3>
		<el-table
				:data="tableData"
				@sort-change="changeTableSort"
				style="width: 100%;margin-bottom: 20px;"
				:header-cell-style="{background:'#eef1f6',color:'#606266'}">
			<el-table-column
					prop="number"
					label="门店编号">
			</el-table-column>
			<el-table-column
					label="顾问">
				<template slot-scope="scope">
					<span style="color: #53b0ff">{{ scope.row.nickname}}</span>
				</template>
			</el-table-column>
			<el-table-column
					prop="today"
					sortable
					label="当日业绩">
			</el-table-column>
			<el-table-column
					prop="week"
					sortable
					label="本周业绩">
			</el-table-column>
			<el-table-column
					prop="month"
					sortable
					label="本月业绩">
			</el-table-column>
			<el-table-column
					prop="today_count"
					sortable
					label="当日单数">
			</el-table-column>
			<el-table-column
					prop="week_count"
					sortable
					label="本周单数">
			</el-table-column>
			<el-table-column
					prop="month_count"
					sortable
					label="本月单数">
			</el-table-column>
			<el-table-column label="">
				<template slot-scope="scope">
					<span style="color: #53b0ff;cursor: pointer" @click="byChannel(scope.row)">渠道占比</span>
				</template>
			</el-table-column>
		</el-table>

		<!--分页-->
		<Pagination @handleClickPage="currentPage" :total="total"></Pagination>
		<!--新建合同的dialog-->
		<el-dialog
				top="15vh !important"
				:visible.sync="dialogChannel"
				width="50%"
				@close="dialogChannelClose">
			<!--这里的插槽会替换title显示的内容-->
	        <div slot="title" class="header-title">
	            <p class="title-name">本月业绩渠道占比</p>
	            <p class="title-info" v-if="dialogChannel">{{ monthChannelData.member.center_name }} - {{ monthChannelData.member.nickname }}</p>
	        </div>
			<div id="channelChart" style="height: 300px"></div>
			<span slot="footer" class="dialog-footer"></span>
		</el-dialog>
	</div>
</template>

<script>
	import countTo from 'vue-count-to'
	import Pagination from '../components/pagination'
	import echarts from 'echarts'
	import {signStatistics, channelStatisticsByMid} from '../api/allInfoApi'

	export default {
		data() {
			return {
				startVal: 0,
				todayEndVal: 59988,
				todayEndValOrder: 40,
				weekEndVal: 60000,
				weekEndValOrder: 44,
				monthEndVal: 80000,
				monthEndValOrder: 444,
				historyEndVal: 100000,
				historyEndValOrder: 4444,
				tabPosition: 'current',
				arr: [],
				// '1 不是被郭德纲发现的，也不是一开始就收为徒弟。',
				// '2 现在雅阁这个状态像极了新A4L上市那段日子。',
				// '3 低配太寒碜，各种需要加装，中配定价过高，又没啥特色',
				// '4 然后各种机油门、经销商造反什么的幺蛾子。',
				// '5 看五月销量，建议参考A4，打8折吧。',
				// '6 不是被郭德纲发现的，也不是一开始就收为徒弟。',
				// '7 现在雅阁这个状态像极了新A4L上市那段日子。',
				// '8 低配太寒碜，各种需要加装，中配定价过高，又没啥特色',
				// '9 然后各种机油门、经销商造反什么的幺蛾子。',
				// '10 看五月销量，建议参考A4，打8折吧。',
				// '11 不是被郭德纲发现的，也不是一开始就收为徒弟。',
				// '12 现在雅阁这个状态像极了新A4L上市那段日子。',
				// '13 低配太寒碜，各种需要加装，中配定价过高，又没啥特色',
				// '14 然后各种机油门、经销商造反什么的幺蛾子。',
				// '15 看五月销量，建议参考A4，打8折吧。',
				// '16 不是被郭德纲发现的，也不是一开始就收为徒弟。',
				// '17 现在雅阁这个状态像极了新A4L上市那段日子。',
				// '18 低配太寒碜，各种需要加装，中配定价过高，又没啥特色',
				// '19 然后各种机油门、经销商造反什么的幺蛾子。',
				// '20 看五月销量，建议参考A4，打8折吧。',
				// '21 不是被郭德纲发现的，也不是一开始就收为徒弟。',
				// '22 现在雅阁这个状态像极了新A4L上市那段日子。',
				// '23 低配太寒碜，各种需要加装，中配定价过高，又没啥特色',
				// '24 然后各种机油门、经销商造反什么的幺蛾子。',
				// '25 看五月销量，建议参考A4，打8折吧。',
				// '26 不是被郭德纲发现的，也不是一开始就收为徒弟。',
				// '27 现在雅阁这个状态像极了新A4L上市那段日子。',
				// '28 低配太寒碜，各种需要加装，中配定价过高，又没啥特色',
				// '29 然后各种机油门、经销商造反什么的幺蛾子。',
				// '30 看五月销量，建议参考A4，打8折吧。',
				tableData: [],
				page: 1,
				total: 0,
				dialogChannel: false,
				verify_month: [
					{
						"total": 0,
						"total1": 0,
						"total0": 0
					}
				],
				verify_all: [
					{
						"total": 0,
						"total1": 0,
						"total0": 0
					}
				],
				verify_list: [],
				channel: [],
				allData: {},
				monthChannelData: {
					member: {
						center_name: '',
						nickname: ''
					}
				}
			}
		},
		created() {
			this._signStatistics() // 签约统计
		},
		computed: {
			waitVerify() {
				if (this.tabPosition === 'current') {
					return this.verify_month[0].total0
				} else {
					return this.verify_all[0].total0
				}
			},
			alreadyVerify() {
				if (this.tabPosition === 'current') {
					return this.verify_month[0].total1
				} else {
					return this.verify_all[0].total1
				}
			},
			alreadyVerifyRate() {
				if (this.tabPosition === 'current') {
					let total = this.verify_month[0].total1 / this.verify_month[0].total
					if (total) {
						return total * 100
					} else {
						return 0
					}
				} else {
					return (this.verify_all[0].total1 / this.verify_all[0].total) * 100
				}
			}
		},
		methods: {
			async _signStatistics() {
				let data = {p: this.page, length: 10}
				const res = await signStatistics(data)
				console.log(res)
				this.todayEndVal = res.data.today[0].price - 0
				this.todayEndValOrder = res.data.today[0].total
				this.weekEndVal = res.data.Week[0].price - 0
				this.weekEndValOrder = res.data.Week[0].total
				this.monthEndVal = res.data.month[0].price - 0
				this.monthEndValOrder = res.data.month[0].total
				this.historyEndVal = res.data.all[0].price - 0
				this.historyEndValOrder = res.data.all[0].total
				this.verify_month = res.data.verify_month
				this.verify_all = res.data.verify_all
				this.verify_list = res.data.verify_list
				this.channel = res.data.channel
				this.tableData = res.data.list
				this.$nextTick(() => {
					this.drawLine(this.channel) // 获取图表
				})
			},
			drawLine(list) {
				console.log(list)
				let myChart = echarts.init(document.getElementById('myChart'))
				let bgColor = '#fff';
				let title = '本月签单金额';
				let color = ['#467395', '#f0d18c', '#82cfc5', '#ea9e68', '#68b4ca'];
				// let EChartData = [
				// 	{
				// 		name: "A类",
				// 		value: "3720"
				// 	},
				// 	{
				// 		name: "B类",
				// 		value: "2920"
				// 	},
				// 	{
				// 		name: "C类",
				// 		value: "2200"
				// 	},
				// 	{
				// 		name: "D类",
				// 		value: "1420"
				// 	},
				// 	{
				// 		name: "E类",
				// 		value: "1820"
				// 	}
				// ];
				let EChartData = list.map(item => {
					return {name: item.name, value: item.price}
				})
				// let formatNumber = function(num) {
				// 	let reg = /(?=(\B)(\d{3})+$)/g;
				// 	return num.toString().replace(reg, ',');
				// };
				const formatNumber = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
				let total = EChartData.reduce((a, b) => {
					return a + b.value * 1
					// return 9999.99
				}, 0);
				let option = {
					backgroundColor: bgColor,
					color: color,
					title: [
						{
							text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
							top: '38%',
							left: '47%',
							textStyle: {
								rich: {
									name: {
										fontSize: 14,
										fontWeight: 'normal',
										color: '#666',
										padding: [10, 0]
									},
									val: {
										fontSize: 18,
										fontWeight: 'bold',
										color: '#333',
									}
								}
							}
						},
						{
							text: '销售额渠道占比',
							top: 20,
							left: 0,
							textStyle: {
								fontSize: 14,
								color:'#666',
								fontWeight: 'bold'
							}
						}
					],
					series: [
						{
							type: 'pie',
							radius: ['40%', '60%'],
							center: ['55%', '50%'],
							data: EChartData,
							hoverAnimation: true, // 放大
							itemStyle: {
								normal: {
									borderColor: bgColor,
									borderWidth: 0 // 设置间距
								}
							},
							labelLine: {
								normal: {
									length: 20,
									length2: 120,
									lineStyle: {
										color: '#e6e6e6'
									}
								}
							},
							label: {
								normal: {
									formatter: params => {
										return (
												'{icon|●}{name|' + params.name + '}{value|' +
												formatNumber(params.value) + '}'
										);
									},
									padding: [0 , -100, 25, -100],
									rich: {
										icon: {
											fontSize: 16
										},
										name: {
											fontSize: 14,
											padding: [0, 10, 0, 4],
											color: '#666666'
										},
										value: {
											fontSize: 18,
											fontWeight: 'bold',
											color: '#333333'
										}
									}
								}
							},
						}
					]
				};
				myChart.setOption(option)
				window.onresize =  ()=> {
					myChart.resize()
				}
			},
			async byChannel(row) {
				const res = await channelStatisticsByMid({mid: row.mid})
				console.log(res)
				this.monthChannelData = res.data
				this.dialogChannel = true
				this.$nextTick( () => {
					this.drawChart(this.monthChannelData.list)
				})
			},
			dialogChannelClose() {
				console.log('关闭了')
				this.monthChannelData = {}
			},
			drawChart(list) {
				console.log(list)
				let channelChart = echarts.init(document.getElementById('channelChart'))
				let bgColor = '#fff';
				let title = '本月签单金额';
				let color = ['#467395', '#f0d18c', '#82cfc5', '#ea9e68', '#68b4ca'];
				let EChartData = list.map(item => {
					return {name: item.name, value: item.price}
				})
				const formatNumber = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
				let total = EChartData.reduce((a, b) => {
					return a + b.value * 1
				}, 0);
				let option = {
					backgroundColor: bgColor,
					color: color,
					title: [
						{
							text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
							top: '38%',
							left: '43%',
							textStyle: {
								rich: {
									name: {
										fontSize: 14,
										fontWeight: 'normal',
										color: '#666',
										padding: [10, 0]
									},
									val: {
										fontSize: 18,
										fontWeight: 'bold',
										color: '#333',
									}
								}
							}
						}
					],
					grid: {
						bottom: 150,
						top: 20,
						right: 0,
						left: 50,
						height: 300
					},
					series: [
						{
							type: 'pie',
							radius: ['40%', '60%'],
							center: ['50%', '50%'],
							data: EChartData,
							hoverAnimation: true, // 放大
							itemStyle: {
								normal: {
									borderColor: bgColor,
									borderWidth: 0 // 设置间距
								}
							},
							labelLine: {
								normal: {
									length: 20,
									length2: 120,
									lineStyle: {
										color: '#e6e6e6'
									}
								}
							},
							label: {
								normal: {
									formatter: params => {
										return (
												'{icon|●}{name|' + params.name + '}{value|' +
												formatNumber(params.value) + '}'
										);
									},
									padding: [0 , -100, 25, -100],
									rich: {
										icon: {
											fontSize: 16
										},
										name: {
											fontSize: 14,
											padding: [0, 10, 0, 4],
											color: '#666666'
										},
										value: {
											fontSize: 18,
											fontWeight: 'bold',
											color: '#333333'
										}
									}
								}
							},
						}
					]
				};
				channelChart.setOption(option)
				window.onresize =  ()=> {
					channelChart.resize()
				}
			},
			changeTableSort(column) {
				console.log(column.order) // ascending
				// if (column.order === "descending") {
				// 	this.tableData = this.tableData.sort((a, b) => b.amount3 - a.amount3)
				// } else {
				// 	this.tableData = this.tableData.sort((a, b) => a.amount3 - b.amount3)
				// }

			},
			changeButton(val) {
				// console.log(val)
				if (val === 'all') {
					// 全部的数据
				}
			},
			// 分页的 当前点击的页数
			currentPage(newPage) {
				console.log(`当前页: ${newPage}`)
				this.page = newPage
				this.loading = true
				this._signStatistics() // 签约统计
			},
		},
		mounted() {

		},
		components: {
			countTo,
			Pagination
		},
	}
</script>
<style scoped lang="scss">
	.content {
		background-color: #104c80;
		height: 90px;
		border-radius: 4px;
		display: flex;
		justify-content: space-between;
		.money,.order {
			padding: 10px 10px;
			display: flex;
			flex-direction: column;
			color: #fff;
			justify-content: space-around;
			font-size: 20px;
		}
		.money span:nth-child(1),.order span:nth-child(1) {
			font-size: 14px;
		}
		.money span:nth-child(2),.order span:nth-child(2) {
			font-weight: 600;
		}
		.order span:nth-child(1) {
			text-align: right;
		}
	}
	.gift-info {
		background-color: #f9f9f9;
		height: 254px;
		border-radius: 4px;
		padding: 20px;
		h3 {
			margin: 0;
			padding: 0;
			color: #104c80;
		}
		.title {
			display: flex;
			justify-content: space-between;
		}
		.status {
			height: 100px;
			background-color: #eee;
			border-radius: 4px;
			margin-top: 20px;
			display: flex;
			padding: 0 20px;
			p {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				margin: 20px 0;
				span:nth-child(1) {
					font-size: 20px;
					font-weight: 600;
					color: #535353;
				}
				span:nth-child(2) {
					font-size: 20px;
					font-weight: 600;
					color: #53b0ff;
				}
			}
		}
		.live {
			height: 95px;
			background-color: #eee;
			border-radius: 4px;
			margin-top: 10px;
			overflow: hidden;
			p {
				color: #686868;
				padding: 0 20px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: 10px 0;
				/*animation-fill-mode: forwards;*/
			}
			.move {
				animation: myMove 25s linear infinite forwards;
			}
		}
	}
	.sale-chart {
		height: 290px;
		background-color: #fff;
	}
	.header-title {
		.title-name {
			font-size: 18px;
			color: #333;
			font-weight: 600;
			margin-bottom: 0;
		}
		.title-info {
			font-size: 11px;
			color: #7d7d7d;
			margin-bottom: 0;
			margin-top: 4px;
		}
	}
	/*文字无缝滚动*/
	@keyframes myMove {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-920px);
		}
	}
</style>
